<!-- src/views/Home.vue -->
<template>
  <div class="container">
    <div class="header">
      <div class="user-info">
        <h1>系统主页</h1>
        <p>欢迎使用本系统</p>
      </div>
      <button class="logout-btn" @click="logout">退出登录</button>
    </div>

    <div class="content">
      <h2>功能导航</h2>
      <router-link class="btn" to="/login">登录页面</router-link>
      <router-link class="btn" to="/users">用户管理</router-link>
      <router-link class="btn" to="/userData">个人资料</router-link>

      <div class="result">
        <h3>系统信息:</h3>
        <p>这是一个受保护的页面，只有登录用户才能访问。</p>
        <p>如果您看到这个页面，说明您已经成功登录。</p>
      </div>

      <div id="userInfoContainer">
        <div v-if="loading" class="text-center">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>
        <div v-else-if="userInfo" class="welcome-info">
          <h4>当前用户信息</h4>
          <p>
            用户名: <strong>{{ userInfo.userName }}</strong>
          </p>
          <p>
            用户ID: <strong>{{ userInfo.id }}</strong>
          </p>
          <p>
            邮箱: <strong>{{ userInfo.email || "未设置" }}</strong>
          </p>
        </div>
        <div v-else class="error-info">
          <h4>错误信息</h4>
          <p>获取用户信息失败</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserInfo, logout as apiLogout} from "@/utils/api.js";

export default {
  name: "Home",
  data() {
    return {
      loading: true,
      userInfo: null,
    };
  },
  mounted() {
    this.checkLogin();
  },
  methods: {
    async checkLogin() {
      try {
        const response = await getUserInfo();
        if (response && response.success && response.data) {
          this.userInfo = response.data;
        } else {
          this.$router.push("/login");
        }
      } catch (error) {
        console.error("检查登录状态失败:", error);
        this.$router.push("/login");
      } finally {
        this.loading = false;
      }
    },
    async logout() {
      try {
        await apiLogout();
        this.$router.push("/login");
      } catch (error) {
        console.error("登出失败:", error);
        this.$router.push("/login");
      }
    },
  },
};
</script>

<!-- 在<style>标签中修改路径 -->
<style scoped>
@import "../assets/css/pages/index.css";
</style>
